<template>
  <div>
   <van-swipe class="my-swipe" :autoplay="1000" indicator-color="yellowgreen">
    <van-swipe-item v-for="v in data.swipe" :key="v">
       <van-image :src='v' />
    </van-swipe-item>
    
  </van-swipe>

  <div class="box">
      <div class="left">
        <van-sidebar v-model="activeKey">
        <van-sidebar-item :title="v.cname" v-for="v in data.cate" :key="v.cid" />  
        </van-sidebar>
      </div>
      <div class="content">
          <van-card
            @click="$router.push('/det?tid='+v.tid)"
              v-for="v in data.cate?data.cate[activeKey].children:[]"
              :key="v.tid"
              :price="v.price+'.00'"
              :desc="v.tintro"
              :title="v.tname"
              :thumb="v.timg"
            />
      </div>
  </div>

  </div>
</template>
<script>
import {Cate} from "@/utils/api"
export default {
  data() {
    return {
       data:{

       },
       activeKey:0
    }
  },
  mounted(){
    this.getData()
  },
  computed:{

  },
  methods:{
      getData(){
        Cate()
        .then(res=>{
          console.log(res);
          if(res.code==200){
            this.data=res.data
          }
        })
      }
  },
}
</script>
<style scoped>
  .box{
    display: flex;
    justify-content: space-between;
  }
  .box>.left{
    width:20% ;
  }
  .content{
    width: 75%;
    padding: 5px;
  }
</style>
